<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>修改资料 - {$kx.config.sitename}</title>
    {include file="/system/head"}
    <link rel="stylesheet" href="{$kx.config.resurl}/template/kxwebno2/css/user.css"/>
    <link rel="stylesheet" href="{$kx.config.resurl}/template/kxwebno2/script/cropper/cropper.min.css"/>

</head>
<body>
{include file="/system/header"}
<section class="w-all user">
    {include file="/system/userheader"}
    <div class="body clearfix">
        <div class="userleft">
            <ul class="navbar">
                {include file="/system/userleft"}
            </ul>
        </div>
        <div class="userright">
            <div class="hd">
                <a class="tab" href="{link=user.info.pwd}">修改密码<em></em></a>
                <a class="tab active" href="{link=user.info.index}">修改资料<em></em></a>
                {if $kx.config.oauth.power}
                <a class="tab" href="{link=user.info.bind}">账户绑定<em></em></a>
                {/if}
            </div>
            <div class="bd">
                <input type="file" id="file_avatar" name="file" style="display: none;" accept="image/*">
                <form action="__SELF__" class="ajaxform" method="post">
                    <input type="hidden" name="avatar" value="{$userinfo.avatar}">
                    <div class="formText_wrap">
                        <div class="formText_notice formText_notice_sm">昵称:</div>
                        <div class="formText formText_sm"><input type="text" class="text" name="nickname"
                                                                 value="{$userinfo.nickname}"></div>
                    </div>
                    <div class="formText_wrap">
                        <div class="formText_notice formText_notice_sm">性别:</div>
                        <div class="formText formText_sm">
                            <div class="text">
                                <input type="radio" name="sex" value="0" class="" {=$userinfo.sex=='0'?'checked':''}>
                                <label for="secret" class="mr20">保密</label>
                                <input type="radio" name="sex" value="1" class="" {=$userinfo.sex=='1'?'checked':''}>
                                <label for="male" class="mr20">男</label>
                                <input type="radio" name="sex" value="2" class="" {=$userinfo.sex=='2'?'checked':''}>
                                <label for="female">女</label>
                            </div>
                        </div>
                    </div>
                    <div class="formText_wrap">
                        <div class="formText_notice formText_notice_sm">简介:</div>
                        <div class="formText formText_sm" style="height: 75px;">
                            <textarea class="text" style="height:auto;overflow:hidden;resize:none;" name="intro">{$userinfo.intro}</textarea>
                        </div>
                    </div>
                    <div class="formText_wrap">
                        <button class="formBtn formBtn_sm">确认修改</button>
                    </div>
                    <div class="clear"></div>
                </form>
            </div>
        </div>
    </div>
</section>
{include file="/system/footer"}
<script src="{$kx.config.resurl}/template/kxwebno2/script/cropper/cropper.min.js"></script>
<script>
    var avatarChanged = false;
    $('#file_avatar').change(function () {
        var cropper;
        var files = this.files;
        done = function (url) {
            layer.open({
                type: 1,
                area: ['600px', '500px'],
                resize: false,
                scrollbar: false,
                content: '<img src="' + url + '">',
                btn: ['确认'],
                success: function (layero, index) {
                    cropper = new Cropper(layero.find('img')[0], {
                        aspectRatio: 1
                    });
                },
                end: function () {
                    cropper.destroy();
                },
                yes: function (index, layero) {
                    if (cropper) {
                        var loading = null;
                        canvas = cropper.getCroppedCanvas({
                            width: 160,
                            height: 160,
                        });
                        canvas.toBlob(function (blob) {
                            var formData = new FormData();
                            formData.append('file', blob, 'avatar.jpg');
                            $.ajax({
                                url: '{link=user.info.uploadAvatar}',
                                method: 'POST',
                                data: formData,
                                dataType: 'json',
                                processData: false,
                                contentType: false,
                                beforeSend: function () {
                                    if (loading === null) {
                                        loading = layer.load(1, {shade: [0.1, '#000']});
                                    }
                                },
                                xhr: function () {
                                    var xhr = new XMLHttpRequest();
                                    xhr.upload.onprogress = function (e) {
                                        var percent = '0';
                                        var percentage = '0%';
                                        if (e.lengthComputable) {
                                            percent = Math.round((e.loaded / e.total) * 100);
                                            percentage = percent + '%';
                                        }
                                    };

                                    return xhr;
                                },
                                success: function (res) {
                                    if (res.code) {
                                        layer.msg(res.msg);
                                    } else {
                                        $('input[name=avatar]').val(res.data.src);
                                        $('.user.avatar img').attr('src', res.data.src);
                                        avatarChanged = true;
                                    }
                                },
                                error: function () {
                                    layer.msg('上传失败，请刷新页面后重试！');
                                },
                                complete: function () {
                                    if (loading !== null) {
                                        layer.close(loading);
                                        loading = null;
                                    }
                                },
                            });
                        });
                    }
                    layer.close(index);
                }
            });
        };
        if (files && files.length > 0) {
            file = files[0];
            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });
    window.onbeforeunload = function () {
        if (avatarChanged) {
            return "头像还未保存，您确定要离开吗";
        }
    }
</script>
</body>
</html>